---
title: Multiple Bar Chart
description: Displays an 8-bit grouped bar chart for comparison.
---

import ChartBarMultiple from "@/components/ui/8bit/blocks/chart-bar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/8bit/card";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";

<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
  <CopyCommandButton
    copyCommand="pnpm dlx shadcn@latest add @8bitcn/chart-bar"
    command="pnpm dlx shadcn@latest add @8bitcn/chart-bar"
  />
</div>

<ComponentPreview title="8-bit Multiple Bar Chart block" name="chart-bar">
  <Card className="w-full max-w-[600px]">
    <CardHeader>
      <CardTitle className="text-sm font-medium">
        Desktop vs Mobile visitors
      </CardTitle>
    </CardHeader>
    <CardContent>
      <ChartBarMultiple />
    </CardContent>
  </Card>
</ComponentPreview>

## Installation

---

<InstallationCommands packageName="chart-bar" />

## Usage

---

```tsx
import ChartBarMultiple from "@/components/ui/8bit/blocks/chart-bar"
```

```tsx
<ChartBarMultiple />
```

